<template>
    <div id="CommonFooter">
    <div   class="footer">
    	<template v-for="(list,index) in navLists">
	        <dl :class="{ red:changeRed == index}" @click="reds(index)">
	            <dt>
	                <router-link :to="list.url">
	                	<img class="footer_img" :src="changeRed == index ? list.imgHover : list.img"/>
	                </router-link>
	            </dt>
	            <dd class="footer_dd1" :class="changeRed == index ? 'blue' : 'gray'">{{list.text}}</dd>
	        </dl>
        </template>
    </div>
    </div>
</template>
<script>
export default {
  name: 'CommonFooter',
  component: {
  },
  mounted () {

  },
  computed: {
      changeRed() {
        return this.$store.state.commonFooter.changeRed
      },
      navLists() {
          return this.$store.state.commonFooter.navLists
      }
  },
  methods: {
  	reds(index){
        this.$store.state.commonFooter.changeRed = index;
    },
  }
}
</script>

<style>
  .footer{
    height: 0.9rem;
    width: 100%;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
  }
  .footer dl{
    float: left;
    width: 25%;
    margin-top: 0.1rem;
  }
  .footer_img{
  	display: block;
    margin: 0 auto;
  	width: 0.56rem;
  	height: 0.44rem;
  	
  	background-size: 0.56rem 0.44rem;
  }
  .footer dd{
    text-align: center;
    margin-left: 0;
    font-size: 0.22rem;
  }
  .gray{
  	color: #9e9e9e;
  }
  .blue{
    color: #3c7cc6;
  }
</style>